<template>
   <el-main class="image-main" v-loading="loading">
          <div class="top p-3">
            <el-row :gutter="10">
              <el-col :span="6" :offset="0" v-for="(item,index) in list ":key="index">
                <el-card shadow="hover" class="relative mb-3" :class="{'border-blue-500':item.checked}">
                    <el-image :src="item.url" fit="cover" class="h-[150px]" 
                    style="width: 100%;"
                      :preview-src-list="[item.url]"
                      :initial-index="0">
                    </el-image>
                    <div class="image-title">{{ item.name }}</div>
                    <div class="flex items-center justify-center p-2">


                      <el-checkbox v-if="openChoose" v-model="item.checked" @change="handeleChooseChange(item)"/>
                      


                      <el-button type="primary" size="small" text @click="handleEdit(item)">重命名</el-button>

                       <el-popconfirm title="是否要删除该图片?"
                        confirm-button-text="确认"
                        cancel-button-text="取消"  
                        @confirm="handleDelete(item.id)">
                          <template #reference>
                            <el-button class="!m-0" type="primary" size="small" text>删除</el-button>
                          </template>
                       </el-popconfirm>
                    </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="bottom">
            <el-pagination 
            background 
            layout="prev,pager, next" 
            :total="total" 
            :current-page="currentPage" 
            :page-size="limit" 
            @current-change="getData"/>
          </div>
        </el-main>

          <el-drawer v-model="drawer" title="上传图片">
            <up-load-file :data="{image_class_id}" @success="handleUploadsuccess"/>
          </el-drawer>

</template>

<script setup>

// 在设计前后端交互，改变数据库内容的时候都需要重新调用getData()以获取新的数据

import {
  getImageList,
  updateImage,
  deleteImage
} from "@/api/image.js"
import { ref,computed } from "vue"
import {showPrompt,toast} from "@/composables/util"
import UpLoadFile from "./UpLoadFile.vue"

//上传图片
const drawer = ref(false)
const openUploadFile = ()=> drawer.value = true

const currentPage = ref(1)//当前页码
const total = ref(0)//分类总数--多少条
const limit = ref(10) //每一页显示多少条
const list = ref([])
const loading = ref(false) 
const image_class_id = ref(0)


//获取数据
function getData(p = null){
  if(typeof p == "number"){
    //p默认值为null 为数字类型说明有传页码过来
    currentPage.value = p //拿到最新的页码
  }

  loading.value = true
  getImageList(image_class_id.value,currentPage.value) //切换数据
  .then(res=>{
      total.value = res.totalCount // 总共的条数
      list.value = res.list.map(o=>{
        o.checked = false
        return o
      }) //每一条的数据
    })
    .finally(()=>{
      loading.value = false
  })
}

//根据分类id，重新加载图片列表--Main内容的渲染方法
const loadDate = (id)=>{
  currentPage.value = 1
  image_class_id.value = id
  getData()
}



//重命名
const handleEdit = (item)=>{
  showPrompt("重命名",item.name).then(({value})=>{
      loading.value = true
      updateImage(item.id,value).then(res=>{
        toast("修改成功")
        getData()
      }).finally(()=>{
        loading.value = false
      })
  })
}

//删除功能
const handleDelete = (id)=>{
  loading.value = true
  deleteImage([id]).then(res=>{
    toast("删除成功")
    getData()
  }).finally(()=>{
    loading.value = false
  })
}

//上传成功
const handleUploadsuccess = ()=>getData(1)

//管理员列表才想出现勾选，图库列表不想
const props = defineProps({
  openChoose:{
    type:Boolean,
    default:false
  },
  limit:{
     type:Number,
     default:1
  }
})

//选中的图片
const emit = defineEmits(["choose"])
const checkedImage = computed(()=>list.value.filter(o=>o.checked))



const handeleChooseChange = (item)=>{
    if(item.checked && checkedImage.value.length > props.limit ){
       item.checked = false
       return toast(`最多只能选中${props.limit}张`,"error")
    }
    emit("choose",checkedImage.value)
}   


defineExpose({
  loadDate,
  openUploadFile
})



</script>

<style scoped>
.image-main{
  position: relative;
}
.image-main .top{
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:50px;
  overflow-y:auto;
}
.image-main .bottom{
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}
.image-title{
  position: absolute;
  top: 122px;
  left: -1px;
  right: -1px;
  @apply text-sm truncate text-gray-100 bg-opacity-50 bg-gray-800 px-2 py-1;
}
</style>